<form class="was-validation" #ngForm="ngForm" [class.submitted]="ngForm.submitted" [formGroup]="form" (ngSubmit)="submit()">
    <div class="m-widget24">
        <div class="d-flex justify-content-between form-inline">
            <ng-container *ngIf="edit; else nameRef">
                区域名称：<input type="text" formControlName="name" maxlength="15" class="form-control form-control-sm" required />
                <div>
                    <button type="button" class="btn btn-secondary btn-sm mr-1" (click)="edit = false">
            取消
          </button>
                    <button class="btn btn-secondary btn-sm">保存</button>
                </div>
            </ng-container>
            <ng-template #nameRef>
                <div>
                    区域名称：<span>{{ zone.name }}</span>
                    <!-- <mat-icon (click)="edit = true" class="ml-1">edit</mat-icon> -->
                </div>
                <div *ngIf="zone.parent_area_name">
                    父区域： <span>{{ zone.parent_area_name }}</span>
                </div>
            </ng-template>
        </div>
        <div>
            创建人：<span>{{ zone.create_admin_username }}</span>
        </div>
        <div>
            创建时间：<span>{{ zone.created_at | date }}</span>
        </div>
        <div>
            区域描述：
            <ng-container *ngIf="edit; else descRef">
                <input type="text" formControlName="des" maxlength="60" class="form-control form-control-sm" />
            </ng-container>
            <ng-template #descRef>
                <span>{{ zone.des | ellipsis }}</span>
            </ng-template>
        </div>
    </div>
</form>